<template>
	<view>
		<view class="coustom-navbar" :style="{height: titleBarHeight+statusBarHeight+20+'px'}">
			<view class="back" @click="backToIndex">
				<image src="../../static/icons/home_avtive.png" mode=""></image>
				<view class="tips">
					<image src="../../static/image/indicate.png" mode=""></image>
					<text>点击电影按钮,查看热映电影</text>
				</view>
			</view>
			<view>
				立即购券
			</view>
			<view class="">

			</view>
		</view>
		<view class="coupon-info">
			<image :src="pic" mode=""></image>
			<view class="coupon-name">
				<text>{{couponInfo.name}}</text>
				<text>￥ {{couponInfo.value}}元</text>
			</view>
		</view>
		<view class="coupon-num">
			<text>数量：</text>
			<u-number-box v-model="prePayInfo.count" @change="valChange"></u-number-box>
		</view>
		<inform :notice='notice' :remind='remind'></inform>
		<view class="pay-bottom">
			<u-button shape="circle" :disabled="disabled" color="linear-gradient(to right,  #6699ff,  #004ce6)"
				custom-style="width:90vw;" @click="buy">
				{{prePayInfo.amount}}立即抢购
			</u-button>
		</view>
	</view>
</template>

<script>
	import inform from '../../components/buyCoupon/inform.vue'
	import {
		createCouponOrder,
		getCouponInfo,
		wxPay,
		getOpenID,
		getCouponOrderInfo
	} from '../../common/http/api.js'
	export default {
		components: {
			inform
		},
		data() {
			return {
				id: "1",
				couponInfo: {
					name: '',
					value: ''
				},
				titleBarHeight: '',
				statusBarHeight: '',
				prePayInfo: {
					openId: uni.getStorageSync("openId"),
					count: 1,
					couponOrderCode: "",
					amount: "",
				},
				pic: '',
				notice: '',
				remind: '',
				cinemaCode: "",
				disabled: false
			};
		},
		methods: {
			initNavBar() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({ //获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
								.statusBarHeight) *
							2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						// 导航栏（胶囊）高度
						this.titleBarHeight = navHeight;
						//  状态栏（顶部）高度
						this.statusBarHeight = res.statusBarHeight
						uni.$emit("sysHeight", {
							titleBarHeight: this.titleBarHeight,
							statusBarHeight: this.statusBarHeight
						})
					}
				})
			},
			backToIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			valChange(e) {

				this.prePayInfo.amount = (this.couponInfo.value * e.value).toFixed(2)

			},
			getCoupon() {
				getCouponInfo(this.id, this.cinemaCode).then(res => {
					const {
						code,
						obj
					} = res
					if (code === "000") {
						this.couponInfo = obj
						this.prePayInfo.amount = obj.value
					}
				})
			},
			buy() {
				if (!this.$store.state.userPhone) {
					uni.navigateTo({
						url: "../../pages/getPhone/getPhone"
					})
					return
				}
				this.disabled = true;
				createCouponOrder(this.prePayInfo, this.cinemaCode).then(res => {
					const {
						code,
						msg
					} = res;
					if (code != 'FAIL') {
						wxPay({
							orderNo: res.data.orderNo,
							openId: uni.getStorageSync("openId"),
						}, this.cinemaCode).then(res => {
							const {
								data
							} = res;
							uni.requestPayment({
								timeStamp: data.timeStamp,
								nonceStr: data.nonceStr,
								package: data.package,
								signType: data.signType,
								paySign: data.paySign,
								appId: data.appId,
								success: res => {
									if (res.errMsg === "requestPayment:ok") {
										uni.showToast({
											title: "购买成功",
											icon: "none",
											duration: 1500
										})
									}
									setTimeout(() => {
										uni.redirectTo({
											url: "../couponList/couponList"
										})
									}, 1500)
								},
								fail: err => {
									console.log(err)
									this.disabled = false;
								}
							})
						})
					} else {
						uni.showToast({
							title: msg,
							icon: "none"
						})
						this.disabled = false;
					}

				})
			},
			getOpenId() {
				uni.login({
					success: (res) => {
						const {
							code
						} = res
						getOpenID(code, this.cinemaCode).then(res => {
							const {
								code,

								data
							} = res
							if (code === "SUCCESS") {
								// uni.getStorageSync("openId") = data.openid
								uni.setStorageSync('openId', data.openid)
								this.session_key = data.session_key
								this.prePayInfo.openId = data.openid
							}

						})
					},
					fail: err => {
						console.log(err);
					}
				})
			},
			getSceneParams(scene) {
				const _scene = decodeURIComponent(scene);
				const paramsArr = _scene.split('&');
				// for (let i in paramsArr) {
				// 	let parmas = paramsArr[i].split('=')
				// 	if (i == 0) {
				// 		this.id = parmas[1];
				// 		this.getCoupon()
				// 	} else if (i == 1) {
				// 		this.prePayInfo.couponOrderCode = parmas[1]
				// 		const couponOrderCode = parmas[1].toString()
				// 	} else {
				// 		this.cinemaCode = parmas[2]
				// 	}
				// }

				this.id = paramsArr[0];
				this.prePayInfo.couponOrderCode = paramsArr[1]
				this.cinemaCode = paramsArr[2]
				// this.id = 12
				// this.prePayInfo.couponOrderCode = 'TY23052109444768185'
				// this.cinemaCode = '15023091'
				this.getCoupon()
				this.getInfo(this.prePayInfo.couponOrderCode);
			},
			getInfo(couponOrderCode) {
				getCouponOrderInfo(couponOrderCode, this.cinemaCode).then(res => {
					const {
						code,
						obj,
						msg
					} = res;
					if (code == '000') {
						this.pic = obj.pictureUrl;
						this.notice = obj.notice;
						this.remind = obj.remind
					} else {
						uni.showToast({
							title: msg,
							icon: "none"
						})
					}
				})
			}
		},
		onLoad(options) {
			this.getSceneParams(options.scene)
			this.initNavBar()
			this.getOpenId()
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
		}
	}
</script>

<style lang="scss">
	.coustom-navbar {
		position: relative;
		box-sizing: border-box;
		border-bottom: 1px solid #f0f0f5;
		z-index: 9999;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		box-sizing: border-box;
		padding: 60rpx 30rpx;
		font-size: 26rpx;

		image {
			width: 40rpx;
			height: 40rpx;
		}

		.back {

			font-size: 22rpx;
			position: relative;

			.tips {
				position: absolute;
				display: flex;
				align-items: center;
				width: 350rpx;
				color: #999;
				bottom: -40rpx;
			}
		}
	}

	.coupon-info {
		display: flex;
		padding: 15rpx;

		image {
			width: 200rpx;
			height: 200rpx;
		}

		.coupon-name {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 20rpx;

			text {
				line-height: 60rpx;
				font-size: 32rpx;
			}

			text:last-child {
				font-size: 28rpx;
				color: red;
			}
		}
	}

	.coupon-num {
		display: flex;
		justify-content: space-between;
		padding: 8rpx 10rpx;
		font-size: 32rpx;
		border-top: 1px solid #f0f0f5;
		align-items: center;
		border-bottom: 1px solid #f0f0f5;

		.num-size {
			width: 50rpx;
			height: 50rpx;
			font-size: 28rpx;
		}
	}


	.pay-bottom {
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-content: center;
	}
</style>